<style>
    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
</style>

<div id="map"></div>
<div id="menu">
    <input
        id="streets-v11"
        type="radio"
        name="rtoggle"
        value="streets"
        checked="checked"
    />
    <label for="streets-v11">streets</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light" />
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
    <label for="dark-v10">dark</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
    <label for="outdoors-v11">outdoors</label>
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
    <label for="satellite-v9">satellite</label>
</div>
<script>
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 13,
        center: [4.899, 52.372]
    });

    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setStyle('mapbox://styles/mapbox/' + layerId);
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }
</script>
